<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="项目名称" prop="name">
        <el-input
            v-model="queryParams.name"
            placeholder="请输入项目名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目类别" prop="category">
        <el-input
            v-model="queryParams.category"
            placeholder="请输入项目类别"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="违约起算天数" prop="penaltyStartDate">
        <el-input
            v-model="queryParams.penaltyStartDate"
            placeholder="请输入违约起算天数"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="违约执行日期" prop="penaltyExecuteDate">
        <el-input
            v-model="queryParams.penaltyExecuteDate"
            placeholder="请输入违约执行日期"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="优惠方式设置" prop="discountMethod">
        <el-input
            v-model="queryParams.discountMethod"
            placeholder="请输入优惠方式设置"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['charge:itema:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['charge:itema:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['charge:itema:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="itemaList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="收费项目ID" align="center" prop="chargeItemId"/>
      <el-table-column label="项目名称" align="center" prop="name"/>
      <el-table-column label="项目类别" align="center" prop="category"/>
      <el-table-column label="计费方式" align="center" prop="billingMethod"/>
      <!--      <el-table-column label="计费单位" align="center" prop="billingUnit" />-->
      <!--      <el-table-column label="价格" align="center" prop="price" />-->
      <el-table-column label="账单周期" align="center" prop="billingCycle"/>
      <el-table-column label="违约起算天数" align="center" prop="penaltyStartDate"/>
      <el-table-column label="违约执行日期" align="center" prop="penaltyExecuteDate"/>
      <el-table-column label="优惠方式设置" align="center" prop="discountMethod"/>
      <el-table-column label="描述" align="center" prop="description"/>

      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.status===0" class="ml-2" type="success">启用</el-tag>
          <el-tag v-else class="ml-2" type="warning">禁用</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
<!--          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"-->
<!--                     v-hasPermi="['charge:itema:edit']">修改-->
<!--          </el-button>-->

          <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate(scope.row)"
              :disabled="scope.row.status !== 0"
              v-hasPermi="['charge:itema:edit']"
          >修改</el-button>

          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['charge:itema:remove']">删除
          </el-button>
<!--          <el-button link type="primary" icon="Remove" @click="handleDisable(scope.row)"-->
<!--                     v-hasPermi="['charge:itema:disable']">禁用-->
<!--          </el-button>-->

          <el-button
              v-if="scope.row.status === 0"
              link
              type="primary"
              icon="Remove"
              @click="handleDisable(scope.row)"
              v-hasPermi="['charge:itema:disable']"
          >禁用</el-button>

          <el-button
              v-else
              link
              type="success"
              icon="Check"
              @click="handleEnable(scope.row)"
              v-hasPermi="['charge:itema:enable']"
          >启用</el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 添加或修改itema对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="itemaRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入项目名称"/>
        </el-form-item>
        <el-form-item label="项目类别" prop="category">
          <el-input v-model="form.category" placeholder="请输入项目类别"/>
        </el-form-item>
        <el-form-item label="计费方式" prop="billingMethod">
          <el-input v-model="form.billingMethod" placeholder="请输入计费方式"/>
        </el-form-item>
        <el-form-item label="计费单位" prop="billingUnit">
          <el-input v-model="form.billingUnit" placeholder="请输入计费单位"/>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入价格"/>
        </el-form-item>
        <el-form-item label="账单周期" prop="billingCycle">
          <el-input v-model="form.billingCycle" placeholder="请输入账单周期"/>
        </el-form-item>
        <el-form-item label="违约起算天数" prop="penaltyStartDate">
          <el-input v-model="form.penaltyStartDate" placeholder="请输入违约起算天数"/>
        </el-form-item>
        <el-form-item label="违约执行日期" prop="penaltyExecuteDate">
          <el-input v-model="form.penaltyExecuteDate" placeholder="请输入违约执行日期"/>
        </el-form-item>
        <el-form-item label="优惠方式设置" prop="discountMethod">
          <el-input v-model="form.discountMethod" placeholder="请输入优惠方式设置"/>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Itema">
import {listItema, getItema, delItema, addItema, updateItema,} from "@/api/charge/itema"
import {ref} from "vue"
import {ElMessage, ElMessageBox} from "element-plus";

const {proxy} = getCurrentInstance()
import request from '@/utils/request'

//点击禁用按钮触发的事件
const handleDisable = (row) => {
  ElMessageBox.confirm(
      '确定要禁用此收费项目吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    const id = row.chargeItemId;
    console.log(id);
    request({
      url: `/charge/itema/disable/${id}`,
      method: 'post',
    })
        .then(res => {
          ElMessage.success("更改成功");
          getList();
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消',
          })
        })
  })

};

//点击启用按钮触发的事件
const handleEnable = (row) =>{
  const id = row.chargeItemId;
  request({
    url: `/charge/itema/enable/${id}`,
    method: 'post',
  })
      .then(res => {
        ElMessage.success("更改成功")
        getList();
      }).catch(()=>{
        ElMessage.error("更新失败！！！")
  })
}


const value = ref(true);

const itemaList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    category: null,
    price: null,
    billingCycle: null,
    penaltyStartDate: null,
    penaltyExecuteDate: null,
    discountMethod: null,
    status: 0,
    description: null,
  },
  rules: {
    price: [
      {required: true, message: "价格不能为空", trigger: "blur"}
    ],
  }
})

const {queryParams, form, rules} = toRefs(data)

/** 查询itema列表 */
function getList() {
  loading.value = true
  listItema(queryParams.value).then(response => {
    itemaList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    chargeItemId: null,
    communityId: null,
    name: null,
    category: null,
    billingMethod: null,
    billingUnit: null,
    price: null,
    billingCycle: null,
    penaltyRate: null,
    penaltyStartDate: null,
    penaltyExecuteDate: null,
    discountMethod: null,
    status: 0,
    description: null,
    createTime: null,
    updateTime: null
  }
  proxy.resetForm("itemaRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.chargeItemId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加收费项目"
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset()
  const _chargeItemId = row.chargeItemId || ids.value
  getItema(_chargeItemId).then(response => {
    form.value = response.data
    open.value = true
    title.value = "修改收费项目"
  })
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["itemaRef"].validate(valid => {
    if (valid) {
      if (form.value.chargeItemId != null) {
        updateItema(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          open.value = false
          getList()
        })
      } else {
        addItema(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          open.value = false
          getList()
        })
      }
    }
  })
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _chargeItemIds = row.chargeItemId || ids.value
  proxy.$modal.confirm('是否确认删除itema编号为"' + _chargeItemIds + '"的数据项？').then(function () {
    return delItema(_chargeItemIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {
  })
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('charge/itema/export', {
    ...queryParams.value
  }, `itema_${new Date().getTime()}.xlsx`)
}

getList()
</script>

<!--样式-->
<style>

/* 行内表单项间距 */
.el-form-inline .el-form-item {
  margin-right: 20px;
  margin-bottom: 15px;
}

/* 输入框样式（统一高度、宽度） */
.el-form-inline .el-input {
  width: 220px;
  height: 36px;
}

/* 搜索按钮样式（突出 primary 色） */
.el-form-inline .el-button--primary {
  height: 36px;
  margin-top: 2px; /* 对齐输入框 */
  padding: 0 24px;
}

/* 重置按钮样式（浅灰色，区分搜索按钮） */
.el-form-inline .el-button--default {
  height: 36px;
  margin-top: 2px;
  padding: 0 24px;
  color: #666;
}


/* 按钮行间距 */
.mb8 {
  margin-bottom: 15px !important;
}

/* 按钮间距（使用 Element UI 的内置类 `mr-2` 更方便，无需自定义） */
.el-row .el-button {
  margin-right: 10px;
  padding: 8px 16px;
  font-size: 14px;
}

/* 导出按钮（警告色，区分危险操作） */
.el-button--warning {
  color: #ff9800;
  border-color: #ff9800;
}

/* 禁用状态按钮（降低透明度） */
.el-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 表格容器（增加阴影，区分内容区域） */
.el-table {
  margin-top: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 表头样式（深灰色背景、加粗字体） */
.el-table th {
  background-color: #f0f2f5 !important;
  font-weight: 500 !important;
  color: #333 !important;
  height: 48px !important;
  text-align: center !important;
}

/* 表格行样式（统一行高、垂直居中） */
.el-table td {
  height: 48px !important;
  vertical-align: middle !important;
  text-align: center !important;
}

/* 斑马线样式（交替行背景，提升可读性） */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa !important;
}

/* 行 hover 效果（浅灰色背景，提示可交互） */
.el-table__body tr:hover td {
  background-color: #f5f7fa !important;
  cursor: default;
}

/* 操作列按钮间距（修改/删除按钮之间的间隔） */
.el-table .el-button {
  margin-right: 8px;
  padding: 6px 12px;
  font-size: 13px;
}

/* 修改按钮（成功色，突出可编辑） */
.el-button--success {
  color: #2d995f;
  border-color: #2d995f;
}

/* 删除按钮（危险色，提示谨慎操作） */
.el-button--danger {
  color: #d9534f;
  border-color: #d9534f;
}

/* 对话框容器（圆角、阴影） */
.el-dialog {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 对话框表头（浅灰色背景、加粗标题） */
.el-dialog__header {
  background-color: #f0f2f5;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 15px 20px;
}

/* 对话框标题（放大字体、突出重点） */
.el-dialog__title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* 对话框内容（增加内边距，避免拥挤） */
.el-dialog__body {
  padding: 20px;
}

/* 表单项间距（垂直方向间隔） */
.el-form .el-form-item {
  margin-bottom: 15px;
}

/* 表单标签（加粗、灰色字体） */
.el-form .el-form-item__label {
  font-weight: 500;
  color: #666;
  width: 100px; /* 统一标签宽度，对齐输入框 */
}

/* 输入框样式（统一高度、圆角） */
.el-form .el-input {
  width: 100%;
  height: 36px;
  border-radius: 4px;
}

/* 文本域样式（固定高度，避免拉伸过⾧） */
.el-form .el-textarea {
  height: 100px !important;
  resize: none; /* 禁止拉伸 */
}

</style>
